<template>
	<view>
		<van-tabs @change="changeTab" color="#1152FC" animated :lazy-render="false" :active="active">
			<van-tab :title-style="active == 0 ? 'color: #1152FC' : ''" :title="`待检查(${unInspectLength})`">
				<view class="bg100" v-if="unInspectList.length" >
					<front-inspect-item @detail="goDetail" :recordList="unInspectList"></front-inspect-item>
				</view>
				
				<!-- <record-item v-if="applyList.length" :recordList="applyList"></record-item> -->
				<view v-else>
					<van-empty description="暂无记录" />
				</view>
				<uni-load-more v-if="unInspectList.length >= 10" :status="status" />
			</van-tab>
			<van-tab :title-style="active == 1 ? 'color: #1152FC' : ''" :title="`整改中(${rectifyLength})`">
				<view class="bg100" v-if="rectifyList.length" >
					<front-inspect-item @detail="goDetail" :recordList="rectifyList"></front-inspect-item>
				</view>
				
				<!-- <record-item v-if="applyList.length" :recordList="applyList"></record-item> -->
				<view v-else>
					<van-empty description="暂无记录" />
				</view>
				<uni-load-more v-if="unInspectList.length >= 10" :status="status" />
			</van-tab>
			<van-tab :title-style="active == 2 ? 'color: #1152FC' : ''" :title="`已检查(${inspectLength})`">
				<!-- <record-item v-if="purchaseList.length" :recordList="purchaseList"></record-item> -->
				<view class="bg100" v-if="inspectList.length">
					<front-inspect-item @detail="goDetail" :recordList="inspectList"></front-inspect-item>
				</view>
				
				<view v-else>
					<van-empty description="暂无记录" />
				</view>
				<uni-load-more v-if="inspectList.length >= 10" :status="status1" />
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import FrontInspectItem from '../components/frontInspectItem.vue'
	// import RecordItem from '../components/recordItem.vue'
	export default {
		components: {
			FrontInspectItem
		},
		data() {
			return {
				unInspectLength: 0,
				inspectLength: 0,
				rectifyLength: 0,
				rectifyList: [],
				unInspectList: [],
				inspectList: [],
				status: 'more',
				status1: 'more',
				haveMore: true,
				haveMore1: true,
				active: 0,
				params: {
					acceptId: uni.getStorageSync('userInfo').id,
					acceptStatus: 1,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params1: {
					acceptId: uni.getStorageSync('userInfo').id,
					acceptStatus: 2,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params2: {
					acceptId: uni.getStorageSync('userInfo').id,
					acceptStatus: 3,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				}
			}
		},
		onLoad() {
			this.getUnInspect()
			this.getRectifyList()
			this.getCompleteInspect()
		},
		onReachBottom() {
			if (this.active === 0 && this.haveMore) {
				this.status = 'loading'
				this.params.pagination.current++
				this.getUnInspect()
			} else if (this.active === 1 && this.haveMore1) {
				this.status1 = 'loading'
				this.params1.pagination.current++
				this.getRectifyList()
			} else if (this.active === 2 && this.haveMore1) {
				this.status2 = 'loading'
				this.params2.pagination.current++
				this.getCompleteInspect()
			}  
		},
		methods: {
			goDetail(id) {
				let str = this.active == 0 ? 'Detail' : 'Result'
				uni.navigateTo({
					url: `/renovationSystem/endInspect${str}/endInspect${str}?id=${id}`
				})
			},
			changeTab(name, title) {
				this.active = name.target.index
			},
			getUnInspect() {
				this.$http.post('/fitment/apply/list', this.params).then(res => {
					if(res.code === 10000) {
						this.unInspectLength = res.data.total
						res.data.list = res.data.list || []
						this.unInspectList = [...this.unInspectList, ...res.data.list]	
						if(this.unInspectList.length >= res.data.total) {
							this.status = 'noMore'
							this.haveMore = false
						}
					}
				})
			},
			
			getRectifyList() {
				this.$http.post('/fitment/apply/list', this.params1).then(res => {
					if(res.code === 10000) {
						this.rectifyLength = res.data.total
						res.data.list = res.data.list || []
						this.rectifyList = [...this.rectifyList, ...res.data.list]	
						if(this.rectifyList.length >= res.data.total) {
							this.status = 'noMore'
							this.haveMore = false
						}
					}
				})
			},
			getCompleteInspect() {
				this.$http.post('/fitment/apply/list', this.params2).then(res => {
					if(res.code === 10000) {
						this.inspectLength = res.data.total
						res.data.list = res.data.list || []
						this.inspectList = [...this.inspectList, ...res.data.list]	
						if(this.inspectList.length >= res.data.total) {
							this.status2 = 'noMore'
							this.haveMore = false
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg100 {
	padding-top: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}
</style>
